<template>
  <div class="select-wrap">
    <p class="form-control" 
      @click.stop="onChangeDropdown" 
      v-text="selectLabel">
    </p>
    <span class="ico-drop" :class="{actived: isDropdown}"></span>
    <transition name="dropdown">
      <ul class="select-drop" v-show="isDropdown">
        <li v-for="(option, index) in options"
          :key="index" 
          :value="option.value"
          v-text="option.label"
          :class="{selected: option.label === selectLabel}"
          @click.stop="onSelected(option.label, option.value)">
        </li>
      </ul>
    </transition>
    <input type="hidden" ref="select" :name="name" :value="value">
  </div>
</template>

<script>
  export default {
    props: {
      value: {
        type: [Number, String],
        default: null
      },
      options: {
        type: Array,
        default() {
          return [
            {value: '1', label: 'wang'}
          ]
        }
      },
      name: {
        type: String,
        default: null
      },
      disabled: {
        type: Boolean,
        default: false
      },
      // 是否带有“请选择”下拉选项
      defaultSe: {
        type: Boolean,
        default: false
      }
    },
    data() {
      return {
        selectLabel: '请选择',
        isDropdown: false
      }
    },
    mounted() {
      this._updateSelected()
    },
    created() {
      if (this.defaultSe) {
        this.options.unshift({value: '', label: '请选择'})
      }
    },
    computed: {
      optionsList() {
        if (this.defaultSe) {
          return this.uniqueArray(this.options)
        }
        return this.options
      }
    },
    methods: {
      onChangeDropdown(ev) {
        if (this.disabled) return
        this.isDropdown = !this.isDropdown
      },
      onSelected(label, val) {
        this.selectLabel = label
        this.isDropdown = false
        this.$emit('input', val)
        this.$emit('on-select', val)
      },
      // 每次更新，和每次初始时调用，设置显示
      _updateSelected() {
        if (!this.value || this.value === '请选择') {
          this.selectLabel = '请选择'
        } else {
          for (let i in this.options) {
            const option = this.options[i]
            if (this.value == option.value) {
              this.selectLabel = option.label
              break
            }
          }
        }
        document.addEventListener('click', () => {
          if (this.isDropdown) {
            this.isDropdown = false
          }
        }, false)
      }
    },
    updated() {
      this._updateSelected()
    }
  }
</script>

<style lang="scss" scoped>
  .select-wrap {
    position: relative;
    .form-control {
      min-width: 90px;
      padding-right: 40px;
      border: 1px solid #ddd;
      height: 30px;
      line-height: 30px;
      text-align: left;
      color: #666;
    }
    .ico-drop {
      position: absolute;
      top: 12px;
      right: 10px;
      z-index: 2;
      width: 0;
      height: 0;
      border: 5px solid transparent;
      border-top-color: #444;
      transition: all .2s;
      &.actived {
        transform: rotate(180deg) translateY(8px);
      }
    }
  }
  .select-drop {
    position: absolute;
    width: 100%;
    z-index: 5;
    max-height: 230px;
    padding: 6px 0;
    background: #fff;
    border: 1px solid #d1dbe5;
    border-top-color: transparent;
    overflow-x: hidden;
    li {
      padding: 8px 10px;
      cursor: pointer;
      color: #48576a;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      &.disabled {
        cursor: default;
        background: #eee;
        &:hover {
          color: #48576a;
          background: #eee;
        }
      }
      &.selected {
        color: #fff;
        background: #20a0ff;
        &:hover {
          color: #fff;
          background: #20a0ff;
        }
      }
      &:hover {
        background: #e4e8f1;
      }
    }
  }
</style>